<template>
  <div>
    <h1>{{ msg }}</h1>
    <input type="text" v-model="msg" />
    <!-- <input type="text" :value="msg" @input="handleInput" /> -->
    <HmLogin v-model="msg" />
  </div>
</template>

<script>
//v-model的实现原理，数据的双向绑定
//是value属性和input事件的结合

//[v-model是语法糖，用于实现数据双向绑定的， V-model等价于 给-个input框提供了:value属性以及 ainput事件]
//v-model添加到组件上的时候，也是提供了一个value属性，一个input事件，value用于传值，input用户修改值

//v-model添加给组件有什么优势?
//.[少声明了一个修改数据的方法]

//v-model组件上只能同时添加一个
// 添加多个会报错

//传递下去的属性名 value
//传递下去事件名input
//需求:修改传递下去的属性名和事件名
//用到model属性可以修改传递下去的事件名和属性名
import HmLogin from './components/hm-login.vue'

export default {
  components: {
    HmLogin,
  },
  data() {
    return {
      msg: '123',
    }
  },
  methods: {
    handleInput(e) {
      this.msg = e
    },
  },
}
</script>

<style></style>
